<!--
 * @Author: your name
 * @Date: 2021-09-06 15:09:13
 * @LastEditTime: 2021-09-07 18:51:24
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \ej-webui\src\pages\bill\customers\index.vue
-->
<template>
  <div>
    <!-- 顶部一行 -->
    <el-form :inline="true" :model="params" class="demo-form-inline">
      <el-form-item size="small">
        <el-date-picker
          v-model="test"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
          class="block"
          value-format="timestamp"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item size="small">
        <el-select
          v-model="params.type"
          placeholder="请选择类型"
          style="width: 220px"
        >
          <el-option label="充值" value="充值"></el-option>
          <el-option label="消费" value="消费"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item size="small">
        <el-select
          v-model="params.status"
          placeholder="请选择状态"
          style="width: 220px"
        >
          <el-option label="正常" value="正常"></el-option>
          <el-option label="未审核" value="未审核"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item size="small">
        <el-select
          v-model="params.userId"
          placeholder="顾客编号"
          style="width: 220px"
        >
          <el-option
            v-for="(item, index) in customers"
            :key="item.id"
            :label="item.username"
            :value="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item size="small">
        <el-button type="primary" @click="findCustomers">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table :data="tableData.list" style="width: 100%" size="small" stripe>
      <el-table-column prop="id" label="编号" width="180"> </el-table-column>
      <el-table-column prop="transferMoney" label="交易金额" width="180">
      </el-table-column>
      <el-table-column prop="transferTime" label="交易时间" width="180">
      </el-table-column>
      <el-table-column prop="type" label="交易类型" width="180">
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template v-slot="scope">
          <el-tag
            v-if="scope.row.status == '正常'"
            size="mini"
            type="success"
            >{{ scope.row.status }}</el-tag
          >
          <el-tag v-else size="mini" type="danger">{{
            scope.row.status
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="description" label="描述"> </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="params.page"
      :page-size="params.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.total"
      :page-sizes="[5, 10, 15]"
      class="block"
      style="float: right; margin-top: 5px"
    >
    </el-pagination>
  </div>
</template>

<script>
import request from '@/utils/request'
import { mapActions } from 'vuex'
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value: '',
      tableData: {},
      params: {
        page: 1,
        pageSize: 5,
      },
      customers: [],
      test:[]
    }
  },
  methods: {
    ...mapActions('customers', ['cascadeRoleFindAll']),
    async pageQueryCustomerAccount() {
      let Time = Object.assign({}, this.test)
      this.params.beginTime = Time[0]
      this.params.endTime = Time[1]
      for (let key in this.params) {
        if (this.params[key] == '') {
          delete this.params[key]
        }
      }
      let res = await request.get('/account/pageQueryCustomerAccount', {
        params: this.params
      })
      this.tableData = res.data
      this.total = res.data.total
    },
    findCustomers() {
      this.pageQueryCustomerAccount()
    },
    //每页数量变化
    handleSizeChange(val) {
      this.params.pageSize = val
      this.pageQueryCustomerAccount()
    },
    //每页跳转
    handleCurrentChange(val) {
      this.params.page = val
      this.pageQueryCustomerAccount()
    }
  },
  created() {
    this.pageQueryCustomerAccount()
    this.cascadeRoleFindAll().then(res => {
      this.customers = res.data.list
    })
  },
}
</script>

<style>
</style>